import React, { PureComponent ,createRef} from 'react'

export class App extends PureComponent {
  constructor() {
    super()

    this.titleRef = createRef()

    this.titleEl = null
  }
  getNativeDom() {
    // 不建议使用document的方式获取DOM
    // const el = document.querySelector('.h2-title')
    
    // React中获取DOM的三种方式
    // 1. 给React元素绑定一个 ref 字符串 (过时-已废弃,React官方不推荐使用)
    // console.log(this.refs.h2_title);

    // 2.通过createRef() 常用, 2.1先创建一个 createRef() 变量, 2.2通过ref绑定到React元素上3.3通过创建的变量的current取到
    // console.log(this.titleRef.current);

    // 3.通过在React元素身上的 ref内绑定回调函数, 回调函数会接收到一个参数 -该DOM本身, 通过赋值给一个变量,拿到原生DOM
    console.log(this.titleEl);
  }
  render() {
    return (
      <div>
        <h2 ref="h2_title">Hello,World!</h2>

        <h2 ref={this.titleEl}>你好,世界!</h2>

        <h2 ref={el => this.titleEl = el}>你好吗?</h2>
        
        <button onClick={e => this.getNativeDom()}>获取DOM</button>
      </div>
    )
  }
}

export default App